﻿@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@namespace MudBlazor.Docs.Examples
@inject HttpClient httpClient

<MudDataGrid T="Element" @ref="grid" Items="_elements" DragDropColumnReordering="_dragDropReorderingEnabled" ColumnsPanelReordering="_columnsPanelReorderingEnabled"
             ColumnResizeMode="ResizeMode.Container" Hideable="_hideable" Filterable="_filterable" Groupable="_groupable" FilterMode="_filterMode" ShowMenuIcon="true">
    <Columns>
        <SelectColumn T="Element"/>
        <PropertyColumn Property="x => x.Number" Title="Nr" />
        <PropertyColumn Property="x => x.Sign" Hidden="true" DragAndDropEnabled="false" Groupable="false" Sortable="false" Filterable="false" />
        <PropertyColumn Property="x => x.Name" Title="Name" Hidden="false" DragAndDropEnabled="true" Groupable="true" Sortable="true" Filterable="true" Grouping="false" />
        <PropertyColumn Property="x => x.Position" Filterable="false" Hideable="false" />
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" @bind-Hidden="_hideMolar" @bind-Grouping="_groupMolar" Hideable="true" />
        <PropertyColumn Property="x => x.Group" Hidden="_hideCategory" Grouping="_groupCategory" Title="Category" />
        <TemplateColumn Title="Template" />
    </Columns>
    <PagerContent>
        <MudDataGridPager T="Element" />
    </PagerContent>
</MudDataGrid>

<div class="d-flex flex-rows flex-wrap mr-4">
    <MudSwitch @bind-Value="_dragDropReorderingEnabled" Color="Color.Primary">Drag Drop Column Reordering</MudSwitch>
    <MudSwitch @bind-Value="_columnsPanelReorderingEnabled" Color="Color.Primary">Columns Panel Column Reordering</MudSwitch>
    <MudSwitch @bind-Value="_filterable" Color="Color.Primary">Filterable</MudSwitch>
</div>

<div class="d-flex flex-rows flex-wrap mr-4">
    <MudSwitch @bind-Value="_hideable" Color="Color.Primary">Hideable</MudSwitch>
    <MudSwitch @bind-Value="_hideMolar" Color="Color.Primary" Converter="_oppositeBoolConverter">Molar Mass Visible</MudSwitch>
    <MudSwitch @bind-Value="_hideCategory" Color="Color.Primary" Converter="_oppositeBoolConverter">Category Visible</MudSwitch>
</div>

<div class="d-flex flex-wrap mt-4 gap-1">
    <MudButton OnClick="@(() => HideColumnsAsync(false))" Variant="Variant.Filled" Color="Color.Primary">Show All Columns</MudButton>
    <MudButton OnClick="@(() => HideColumnsAsync(true))" Variant="Variant.Filled" Color="Color.Primary">Hide All Columns</MudButton>
</div>

<div class="d-flex flex-rows flex-wrap mr-4">
    <MudSwitch @bind-Value="_groupable" Color="Color.Primary">Groupable</MudSwitch>
    <MudSwitch @bind-Value="_groupMolar" Color="Color.Primary">Group By Molar</MudSwitch>
    <MudSwitch @bind-Value="_groupCategory" Color="Color.Primary">Group By Category</MudSwitch>
</div>

<div class="d-flex flex-wrap mt-4">
    <MudRadioGroup T="DataGridFilterMode" @bind-Value="_filterMode">
        <MudRadio Dense="true" Value="@DataGridFilterMode.Simple" Color="Color.Primary">Simple</MudRadio>
        <MudRadio Dense="true" Value="@DataGridFilterMode.ColumnFilterMenu" Color="Color.Tertiary">Column Menu</MudRadio>
        <MudRadio Dense="true" Value="@DataGridFilterMode.ColumnFilterRow">Column Row</MudRadio>
    </MudRadioGroup>
</div>


@code {
    private IEnumerable<Element> _elements = new List<Element>();

    private DataGridFilterMode _filterMode = DataGridFilterMode.Simple;
    private bool _dragDropReorderingEnabled = true;
    private bool _columnsPanelReorderingEnabled = true;
    private bool _hideable = true;
    private bool _filterable = true;
    private bool _groupable = true;
    private bool _hideMolar = false;
    private bool _hideCategory = false;
    private bool _groupMolar = false;
    private bool _groupCategory = false;
    public MudDataGrid<Element> grid = null;

    private MudBlazor.Converter<bool, bool?> _oppositeBoolConverter = new()
    {
            SetFunc = value => !value,
            GetFunc = value => !value ?? true,
        };

    protected override async Task OnInitializedAsync()
    {
        _elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

    private async Task HideColumnsAsync(bool hide)
    {        
        foreach (var column in grid.RenderedColumns)
        {
            if (hide)
            {
                await column.HideAsync();
            }
            else
            {
                await column.ShowAsync();
            }
        };
    }
}
